<template>
  <div class="product-selection">
    <AppHeader activeKey="2" @logout="handleLogout" />
    
    <div class="content-wrapper">
      <div class="sidebar">
        <div class="user-info">
          <i class="user-icon"></i>
          <span>账号信息</span>
        </div>
        <div class="sidebar-menu active">
          <i class="product-icon"></i>
          <span>产品选择</span>
        </div>
        <div class="sidebar-menu">
          <i class="appointment-icon"></i>
          <span>新增预约/转诊</span>
        </div>
        <div class="sidebar-menu">
          <i class="clinic-icon"></i>
          <span>临床信息</span>
        </div>
      </div>
      
      <div class="main-content">
        <div class="header">
          <div class="title">产品列表</div>
          <a-button type="primary" class="create-button">创建病例</a-button>
        </div>
        
        <div class="product-cards">
          <div 
            v-for="(product, index) in products" 
            :key="index"
            class="product-card"
            :class="{ selected: selectedProduct === index }"
            @click="selectProduct(index)"
          >
            <div class="product-title">{{ product.title }}</div>
            <div class="service-period">服务周期: <span>{{ product.period }}</span></div>
            <ul class="product-features">
              <li v-for="(feature, idx) in product.features" :key="idx">
                <span>{{ feature }}</span>
              </li>
            </ul>
            <a-button 
              type="primary" 
              class="select-button"
              @click.stop="confirmSelection(index)"
            >
              选择
            </a-button>
          </div>
        </div>
        
        <div class="pagination-controls">
          <div class="pagination-dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import AppHeader from '../components/AppHeader.vue'

const router = useRouter()

const selectedProduct = ref(null)

// 产品数据
const products = [
  {
    title: '牙之初-乳牙版',
    period: '1年',
    features: [
      '适用于儿童乳牙期（3-6岁）的各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期1年。'
    ]
  },
  {
    title: '牙之初-替牙版',
    period: '2年',
    features: [
      '适用于儿童替牙期（6-12岁）的各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期2年。',
      '不限回访次数。'
    ]
  },
  {
    title: '牙之初Plus',
    period: '3年',
    features: [
      '适用于儿童乳牙和替牙期（3-12岁）各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期3年。',
      '不限回访次数。'
    ]
  },
  {
    title: '牙之初Pro',
    period: '5年',
    features: [
      '适用于儿童恒牙期（6-16岁）各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期5年。',
      '不限回访次数。'
    ]
  }
]

// 选择产品
const selectProduct = (index) => {
  selectedProduct.value = index
}

// 确认选择
const confirmSelection = (index) => {
  selectedProduct.value = index
  message.success(`已选择 ${products[index].title}`)
}

// 处理退出登录
const handleLogout = () => {
  router.push('/login')
}
</script>

<style scoped>
.product-selection {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.content-wrapper {
  display: flex;
  margin-top: 64px; /* Space for fixed header */
  min-height: calc(100vh - 64px);
}

.sidebar {
  width: 200px;
  background-color: #fff;
  padding: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info, .sidebar-menu {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  cursor: pointer;
}

.sidebar-menu.active {
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}

.user-icon, .product-icon, .appointment-icon, .clinic-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-color: #ccc;
  border-radius: 50%;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.create-button {
  border-radius: 4px;
}

.product-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
}

.product-card {
  width: 230px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.product-card:nth-child(1) {
  background: linear-gradient(to bottom, #fff, #fff);
  border-top: 4px solid #ffb74d;
}

.product-card:nth-child(2) {
  background: linear-gradient(to bottom, #fff, #fff);
  border-top: 4px solid #ffee58;
}

.product-card:nth-child(3) {
  background: linear-gradient(to bottom, #fff, #fff);
  border-top: 4px solid #ffee58;
}

.product-card:nth-child(4) {
  background: linear-gradient(to bottom, #fff, #fff);
  border-top: 4px solid #4fc3f7;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.service-period {
  text-align: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.service-period span {
  font-weight: 600;
  color: #1890ff;
}

.product-features {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex: 1;
}

.product-features li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.product-features li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: #52c41a;
  border-radius: 50%;
}

.select-button {
  width: 100%;
  border-radius: 4px;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d9d9d9;
}

.dot.active {
  background-color: #1890ff;
  width: 20px;
  border-radius: 4px;
}
</style>
